<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import { useRoute } from 'vue-router';
import { gethVehicle, gethVehicleleft } from '@/apis/vehicles';
import VehicleDetailMosaic from '@/pages/vehicles/components/VehicleDetailMosaic.vue';

const route = useRoute();
const model = ref<any>({});
const breadcrumbs = ref<string[]>([]);
const vehicleImages = ref<string[]>([]); // 用于存储所有相关图片 URL 的数组

// 定义车辆图片类型
type VehicleImage = {
    imageUrl: string;
};

watchEffect(async () => {
    const { id, productType, ancestors, type } = route.query;
    breadcrumbs.value = [...ancestors as string[]].slice(1);

    const vehicleApi = type === '0' ? gethVehicleleft : gethVehicle;
    try {
        const { data } = await vehicleApi({
            data: {
                carId: Number(id),
                productId: productType,
            },
        });
        console.log('Vehicle data:', data);
        model.value = data;
        // 提取所有图片列表并加入到 vehicleImages 中
        vehicleImages.value = [
            ...data.carShiWuTuList.map((item: VehicleImage) => item.imageUrl),
            ...data.innerPicList.map((item: VehicleImage) => item.imageUrl),
            ...data.carCheXingTuList.map((item: VehicleImage) => item.imageUrl),
            ...data.carEffectPicList.map((item: VehicleImage) => item.imageUrl),
        ];
    } catch (error) {
        console.error('Failed to fetch vehicle data:', error);
    }
});
</script>


<template>
  <div class="parent-element">
      <div class="flex flex-col overflow-auto overscroll-contain">
          <div class="flex items-center py-6 bg-white gap-x-2 pxm">
              当前位置:
              <a-breadcrumb separator="<">
                  <template v-for="item in breadcrumbs" :key="item">
                      <a-breadcrumb-item class="!text-gray-600">{{ item }}</a-breadcrumb-item>
                  </template>
              </a-breadcrumb>
          </div>
      </div>
      <div class="header-text">
          <div class="drawing">
              <div class="drawingtext">领绣脚垫施工图</div>
              <div v-if="true">
                  <VehicleDetailMosaic :data="model" />
              </div>
          </div>
      
          <div class="productdrawing">
              <div class="productdrawingtext">成品图</div>
              <div v-if="vehicleImages.length > 0" class="image-container">
                  <div v-for="(image, index) in vehicleImages" :key="index">
                      <img class="imgt" :src="image" alt="成品图" />
                  </div>
              </div>
              <div v-else style="margin-top: 200px;">
                  <p class="text-center text-gray-600">暂无数据...</p>
              </div>
          </div>
      </div>
  </div>
</template>



<style lang="scss" scoped>
/* 为新添加的部分添加样式 */
.parent-element {
    height: 100%;
}

.header-text {
    display: flex;
    justify-content: space-between;
    text-align: center;
    padding: 10px;
    font-size: 18px;
    height: auto;
    width: 100%;
}

.drawing {
    width: 80%;
    height: auto;
    border-right: 1px solid #c7c7c7;
    border-top: 1px solid #c7c7c7;
    padding: 10px;
    display: flex;
    flex-direction: column;
    // justify-content: center;
    align-items: center;
    position: relative;
}

.drawing img {
    width: 70%;
    height: 60%;
    object-fit: contain;
}
.drawingtext {
  text-align: center;
}
.productdrawing {
    width: 20%;
    height: 97%;
    padding: 10px;
    border-top: 1px solid #c7c7c7;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    overflow-y: auto;
}
.imporent{
    margin-bottom:20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center; /* 将子元素水平居中 */
    text-align: center; /*如果需要文本内容也水平居中 */
}
.image-container {
    overflow-y: auto;
    width: 70%;
    padding: 10px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.imgts{
    width: 100%;
    // height: 200px;
}
 .image-container img{
   width:300px;
 }
.image-text {
    margin-bottom: 5px;
}
.pxm{
    padding-left: 4rem;
    padding-right: 21rem;
}
</style>
